<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<select name="" id="sel1">
		<option value="">请选择</option>
	</select>
	<select name="" id="sel2">
		<option value="">请选择</option>
	</select>
	<select name="" id="sel3">
		<option value="">请选择</option>
	</select>
	<script src = "area.js"></script>
	<script>
		var sel1 = document.getElementById('sel1');
		var sel2 = document.getElementById('sel2');
		var sel3 = document.getElementById('sel3');

		var html = "<option value=\"请选择\">请选择</option>";
		for(var i = 0;i<area.length;i++){
			html += "<option value='"+area[i].name+"'>"+area[i].name+"</option>";
		}
		sel1.innerHTML = html;
	    
	    sel1.onchange = function(){
	    	var val = this.value;
	    	var html = "<option value=\"请选择\">请选择</option>";
	    	for(var i = 0;i<area.length;i++){
	    		if(val == area[i].name){
	    			for(var j = 0;j<area[i].city.length;j++){
	    				html += "<option value='"+area[i].city[j].name+"'>"+area[i].city[j].name+"</option>"
	    			}
	    			sel2.innerHTML = html;
	    			break;
	    		}
	    	}
	    }

	    sel2.onchange = function(){
	    	var val = this.value;
	    	var html = "<option value=\"请选择\">请选择</option>";
	    	for(var i = 0;i<area.length;i++){
	    		for(var j = 0;j<area[i].city.length;j++){
	    			if(val == area[i].city[j].name){
	    				for(var m = 0;m<area[i].city[j].area.length;m++){
	    					html += "<option value='"+area[i].city[j].area[m]+"'>"+area[i].city[j].area[m]+"</option>"
	    				}
	    				sel3.innerHTML = html;
	    				break;
	    			}
	    		}
	    	}
	    }
	</script>
</body>
</html>